<!DOCTYPE html>
<html>
  <head>
    <title>计算器</title>
    <meta charset="utf-8" />
    <meta name="keywords" content="keyword1,keyword2,keyword3" />
    <meta name="description" content="this is my page" />
    <meta name="content-type" content="text/html; charset=UTF-8" />

    <!-- <link rel="stylesheet" type="text/css" href="css/layout.css"> -->
    <style>
      /* 为了方便布局，使用border-box盒子模型*/
      * {
        box-sizing: border-box;
      }

      /* add some spacing */
      body {
        font-family: "Space Mono";
        background: #f6f6f6;
        padding-bottom: 30px;
        padding-top: 30px;
      }

      /* 给输入框和按钮切换合适字体 */
      .calculator input,
      .calc-button {
        font-family: "Space Mono";
      }


      /* limit the width and center */
      .calculator {
        /* 设置计算器最大宽度 */
        max-width: 400px;
        /* 居中 */
        margin: 0 auto;
        /* 设置边界*/
        border: 2px solid #111;
        /* 圆角边界 */
        border-radius: 5px; 
      }

      .calculator input {
        /* reset basic form styles */
        background: none;
        border: none;
        box-shadow: none;
        outline: none;

        padding: 20px 10px;
        width: 100%;
        border-bottom: 2px solid #111;
        color: #333;
        text-align: right;
        font-size: 40px;
        border-radius: 0;
      }

      .calc-button {
        background: rgba(0, 0, 0, 0.5); /* light background with opacity 50% */
        border: 1px solid #111; /* black border */
        padding: 20px;
        color: #eee; /* white text */
        border-radius: 5px; /* rounded corners */
        font-size: 22px; /* larger fonts */
        /* 改变鼠标样式 */
        cursor: pointer;
      }


      .calculator-buttons {
        /* small spacing within our container */
        padding: 20px;

        /* the grid stuff! */
        display: grid;

        /* create 4 columns */
        grid-template-columns: 1fr 1fr 1fr 1fr;

        /* add the grid gap */
        grid-gap: 15px;
      }

      /* span across 3 columns */
      .is-zero,
      .is-clear {
        grid-column: span 3;
      }

      /* go blue */
      .is-clear {
        background: #3572db;
      }

      .is-equals {
        background: #28d060;
      }
    </style>
  </head>

  <body>
    <div class="calculator">
      <!-- the input -->
      <input type="number" />

      <!-- the buttons -->
      <div class="calculator-buttons">
        <button class="calc-button is-clear">Clear</button>
        <button class="calc-button">&divide;</button>

        <button class="calc-button">7</button>
        <button class="calc-button">8</button>
        <button class="calc-button">9</button>
        <button class="calc-button">&times;</button>

        <button class="calc-button">4</button>
        <button class="calc-button">5</button>
        <button class="calc-button">6</button>
        <button class="calc-button">&minus;</button>

        <button class="calc-button">1</button>
        <button class="calc-button">2</button>
        <button class="calc-button">3</button>
        <button class="calc-button">&plus;</button>

        <button class="calc-button is-zero">0</button>
        <button class="calc-button is-equals">&equals;</button>
      </div>
    </div>
  </body>
</html>
